<template>
  <div class="body" v-loading="loading.status">
    <div class="table_content">
      <div class="table_filtrate">
        <div class="tf_item" style="margin-right: 30px">
          <div class="tag">商务</div>
          <!-- <el-select v-model="tableParams.business_uid" clearable size="mini" placeholder="请选择"
                        :filterable="true" class="inp" @change="changeSelectBusinessuid">
                        <el-option v-for="item in business_select" :key="item.id" :label="item.nickname"
                            :value="item.id">
                        </el-option>
                    </el-select> -->
        </div>
        <div class="tf_item" style="margin-right: 30px">
          <div class="tag">机构</div>
          <el-select
            placeholder="请选择"
            clearable
            size="mini"
            v-model="tableParams.o_id"
            :filterable="true"
            class="inp"
            no-data-text="请先选择商务"
          >
            <el-option
              v-for="item in organization_select"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="tf_item">
          <el-button @click="loadTableData" size="mini" type="primary" plain
            >搜索</el-button
          >
        </div>
      </div>

      <div class="table_operate">
        <el-button
          class="btn_add"
          type="primary"
          size="mini"
          @click="handleToGoCreate"
          >添加</el-button
        >
      </div>

      <div class="table-card">
        <el-table
          v-loading="loading.table"
          class="table"
          :data="tableData.data"
          :row-class-name="tableRowClassName"
          size="mini"
          :border="true"
        >
          <el-table-column prop="id" label="ID" width="60"> </el-table-column>
          <el-table-column prop="organization_ids" label="机构ID" :width="160">
          </el-table-column>
          <el-table-column label="机构">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.organization_names"
                multiple
                placeholder="请选择"
                :disabled="true"
              >
                <el-option
                  v-for="item in options_organization_select"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>

              <!-- <el-cascader
                style="width: 100%"
                :disabled="true"
                :value="scope.row.business_organization"
                :options="options_business_organization"
                :show-all-levels="false"
                :props="props"
                clearable
              ></el-cascader> -->
            </template>
          </el-table-column>

          <el-table-column label="操作" :width="120">
            <template slot-scope="scope">
              <el-link
                class="handle"
                type="warning"
                v-show="scope.row.status == 'stop'"
                @click="handleTableRegain(scope.$index, scope.row)"
                >恢复</el-link
              >
              <el-link
                class="handle"
                type="primary"
                v-show="scope.row.status == 'normal'"
                @click="handleTableEdit(scope.$index, scope.row)"
                >编辑</el-link
              >
              <el-link
                class="handle"
                type="danger"
                v-show="scope.row.status == 'normal'"
                @click="handleTableDelete(scope.$index, scope.row)"
                >删除</el-link
              >
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @size-change="handleTableSizeChange"
          @current-change="handleTableCurrentChange"
          :current-page="currentPage4"
          :page-sizes="$pageSize"
          :page-size="tableParams.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  apiOrganizationMutexListpage,
  apiOrganizationMutexDel,
  apiBusinessOrganizationSelect,
  apiOrganizationSelects,
} from "@/api/apiCommon";

import {
  isNullOrEmpty,
  toEscapedJsonString,
  fromEscapedJsonString,
  assignFormParams,
} from "@/utils/common";
import { paramsDeleteNull } from "@/utils/common";
export default {
  name: "Index",
  data() {
    return {
      tableParams: {
        page: 1,
        size: 15,
      },
      tableData: {
        current_page: 1,
        data: [],
        last_page: 1,
        per_page: "15",
        total: 0,
      },
      props: { multiple: true },
      currentPage4: 1,
      business_select: [],
      organization_select: [],
      options_organization_select: [],
      options_business_organization: [],
      fromViewCofing: {
        input_width: "120px",
        label_width: "120px",
      },
      loading: {
        table: false,
      },
    };
  },
  created() {
    this.loadTableData();
    this.reqOrganizationSelects();
  },
  methods: {
    // 列表请求
    loadTableData() {
      const _this = this;
      this.loading_start("table");
      var tableParamsData = { ..._this.tableParams };
      // tableParamsData = paramsDeleteNull(tableParamsData, 'business_uid');
      // tableParamsData = paramsDeleteNull(tableParamsData, 'o_id');
      // tableParamsData = paramsDeleteNull(tableParamsData, 'fuzzy_search');
      // tableParamsData = paramsDeleteNull(tableParamsData, 'loan_type');
      // tableParamsData = paramsDeleteNull(tableParamsData, 'push_status');
      // tableParamsData = paramsDeleteNull(tableParamsData, 'entry_status');
      apiOrganizationMutexListpage(tableParamsData)
        .then((response) => {
          //   const result = response;
          //   _this.tableData = result.data.datalist;

          const result = response;
          var tableData = result.data.datalist;
          for (var i = 0; i < tableData.data.length; i++) {
            tableData.data[i]["organization_names"] = tableData.data[i][
              "organization_ids"
            ]
              .split(",")
              .map(Number);
          }
          _this.tableData = tableData;

          this.loading_end("table");
        })
        .catch(function (result) {
          _this.$message.error(result.msg);
          _this.tableData.data = null;
          this.loading_end("table");
        });
    },

    // 获取机构
    reqOrganizationSelects() {
      const _this = this;
      this.loading_start();
      apiOrganizationSelects({})
        .then((response) => {
          if (response.code == 1) {
            _this.options_organization_select = response.data.selects;
          } else {
            _this.$message.error(response.msg);
          }
          _this.loading_end();
        })
        .catch(function (result) {
          _this.loading_end();
        });
    },
    // // 获取商务机构
    // req_apiBsinessOrganizationbSelect() {
    //   const _this = this;
    //   this.loading_start("table");
    //   apiBusinessOrganizationSelect({})
    //     .then((response) => {
    //       if (response.code == 1) {
    //         _this.options_business_organization = response.data.selects;
    //       } else {
    //         _this.$message.error(response.msg);
    //       }
    //       this.loading_end("table");
    //     })
    //     .catch(function (result) {
    //       this.loading_end("table");
    //     });
    // },
    // 页面跳转
    handleToGoCreate() {
      this.$router.push({
        path: "/organizationMutex/create",
        query: { id: 0 },
      });
    },
    // 表格行状态
    tableRowClassName({ row, rowIndex }) {
      if (row["status"] == "stop") {
        return "discard-row";
      }
    },
    // 表格操作
    handleTableEdit(index, row) {
      this.$router.push({
        path: "/organizationMutex/update",
        query: { id: row.id },
      });
    },
    // 表格恢复
    handleTableRegain(index, row) {
      var _this = this;
      var params = {
        id: row.id,
        status: "normal",
      };
      this.loading_start("table");
      apiProductUpdatePart(params).then((response) => {
        this.loading_end("table");
        _this.loadTableData();
      });
    },
    // 表格删除
    handleTableDelete(index, row) {
      const _this = this;

      this.$confirm("是否删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading_start("table");
          apiOrganizationMutexDel({
            id: row.id,
          }).then((response) => {
            this.$message({
              message: response.msg,
              type: "success",
            });
            this.loading_end("table");
            _this.loadTableData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // 数量改变
    handleTableSizeChange(val) {
      this.tableParams.size = val;
      this.loadTableData();
    },
    // 页数改变
    handleTableCurrentChange(val) {
      this.tableParams.page = val;
      this.loadTableData();
      // console.log(`当前页: ${val}`);
    },
    // 部分状态改变
    tableUpdateItem(item) {
      var _this = this;
      var params = {
        id: item.id,
        push_status: item.push_status,
        entry_status: item.entry_status,
      };
      this.loading_start("table");
      apiProductUpdatePart(params).then((response) => {
        this.loading_end("table");
      });
    },

    loading_start(keys) {
      if (Array.isArray(keys)) {
        keys.forEach((key) => {
          this.loading[key] = true;
          setTimeout(() => {
            this.loading[key] = false;
          }, 5000);
        });
      } else {
        this.loading[keys] = true;
        setTimeout(() => {
          this.loading[keys] = false;
        }, 5000);
      }
    },
    loading_end(keys) {
      if (Array.isArray(keys)) {
        keys.forEach((key) => {
          this.loading[key] = false;
        });
      } else {
        this.loading[keys] = false;
      }
    },
  },
};
</script>

<style lang="scss"></style>
